import React, { Component } from 'react'
import PropTypes from 'prop-types'
import '../../综合201-组件通信案例/style.css'

export class TabControl extends Component {
  constructor() {
    super()

    this.state = {
      tabNum: 0
    }
  }

  render() {
    const { title } = this.props
    const { tabNum } = this.state
    return (
      <div className="tabDiv">
        {title.map((item, index) => {
          return (
            <button
              key={item}
              className={`btnLight ${tabNum === index ? 'active' : ''}`}
              onClick={(e) => this.changeLightClick(index)}
            >
              {item}
            </button>
          )
        })}
      </div>
    )
  }

  // 点击切换样式：
  changeLightClick(index) {
    this.setState({
      tabNum: index
    })
    // 传给父亲
    this.props.changeMsg(index)
  }
}

TabControl.propTypes = {
  title: PropTypes.array.isRequired
}

export default TabControl
